<template>
  <div class="header">
    <div class="header-left">
      <i class="iconfont icon-back"></i>
    </div>
    <div class="header-search">
      <i></i>
      输入城市/景点/游玩主题
    </div>
    <router-link tag="div" to="/city" class="header-right">
      {{city}}<i class="iconfont icon-moreunfold"></i>
    </router-link>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'homeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~css/variable.styl'
.header
  display:flex
  align-items center
  height:.9rem
  color:#fff
  background:$headerBGC
  &-left
    flex: 0 0 .8rem
    i
      display:block
      width:.4rem
      height:.4rem
      font-size:.4rem
  &-search
    flex:1
    display:block
    background:#fff
    height:.6rem
    line-height .6rem
    color:$searchColor
    border-radius:.1rem
    padding-left:.3rem
    font-size .25rem
  &-right
    flex: 0 0 1.35rem
    display:block
    height 100
    line-height .9rem
    text-align:center
    font-size:.25rem
    color:#fff
    i
      display:inline-block;
      font-size:.3rem
</style>
